<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <div class="header d-flex mb-20">
      <MyButton class="add mr-20" icon="el-icon-plus" @click="handleAdd">{{
        $t("common.add")
      }}</MyButton>
      <el-form inline>
        <el-form-item
          :label="$t('zhuapaijilu.shaixuantiaojian')"
          prop="mapName"
        >
          <el-input
            v-model="stationName"
            :placeholder="$t('jizhanguanli.station_name')"
          />
        </el-form-item>
        <MyButton class="confirm" @click="handleConfirm">{{
          $t("common.confirmQueding")
        }}</MyButton>
      </el-form>
    </div>
    <MyTable
      :data="tableData"
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        sortable
        width="60"
        type="index"
        :label="$t('common.order_number')"
      ></el-table-column>
      <el-table-column
        prop="stationName"
        :label="$t('jizhanguanli.station_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="ipAddress"
        :label="$t('jizhanguanli.ip_address')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="stationNum"
        :label="$t('jizhanguanli.station_num')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="positionX"
        :label="$t('jizhanguanli.position_x')"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="positionY"
        :label="$t('jizhanguanli.position_y')"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="mapName"
        :label="$t('jizhanguanli.map_name')"
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="160">
        <template slot-scope="scope">
          <MyButton
            class="text"
            type="text"
            size="small"
            @click="positionManagement(scope.row)"
            >{{ $t("position") }}</MyButton
          >
          <span class="ml-10 mr-10" v-if="scope.row.lib_type !== 0">|</span>
          <MyButton
            class="text"
            v-if="scope.row.lib_type !== 0"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.edit") }}
          </MyButton>
          <span class="ml-10 mr-10" v-if="scope.row.lib_type !== 0">|</span>
          <MyButton
            class="text"
            type="text"
            size="small"
            v-if="scope.row.lib_type !== 0"
            @click="handleDelete(scope.row)"
            >{{ $t("common.delete") }}</MyButton
          >
        </template>
      </el-table-column>
    </MyTable>
    <EditDialog
      :visible.sync="isAddDialogShow"
      :row="row"
      :type="editType"
      @refresh="getList"
    />
    <EditPosition
        :title="positionModal.title"
        :visible.sync="positionModal.open"
        :updateData="positionModal.updateData"
        width="1000px"
        append-to-body
    />
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getStationList, deleteStation } from "./service";
import EditDialog from "./EditDialog.vue";
import EditPosition from "./EditPosition.vue";
import util from "@/utils";
export default {
  components: {
    MyButton,
    EditDialog,
    EditPosition
  },
  data() {
    return {
      stationName: '',
      tableData: [],
      row: {},
      editType: "add",
      isAddDialogShow: false,
      lib_type: void 0,
      positionModal:{
          // 弹出层标题
          title: "设置基站位置",
          open: false,
          updateData: undefined,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
     positionManagement(row){
         this.positionModal.open = true;
         this.positionModal.updateData = row;
     },
    handleManagement(row) {
      // 陌生人口
      if (row.lib_type === 0) {
        this.$router.push({
          name: "greyList",
        });
        localStorage.setItem("curR", "library");
      } else {
        this.$router.push({
          name: "targets",
          query: { lib_name: row.lib_name, lib_id: row.lib_id },
        });
      }
    },
    handleConfirm() {
      this.getList();
    },
    async getList() {
      const res = await getStationList({ stationName: this.stationName });
      this.tableData = res.rows.map((item) => {
        return {
          ...item,
          create_time: item.create_time || "--",
        };
      });
    },
    handleAdd() {
      this.isAddDialogShow = true;
      this.editType = "add";
      this.row = {};
    },
    handleEdit(row) {
      this.isAddDialogShow = true;
      this.editType = "edit";
      this.row = { ...row };
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("jizhanguanli.deletePromit"),
        this.$t("jizhanguanli.delete_station"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        let res = await deleteStation([row.stationId]);
        if (res.code == 200) {
          util.msg.success("deleteSuccess");
          this.getList();
        }
        // 直接删除
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
</style>
